<template>
	<view class="course-container">
		<!-- 固定在顶部的区域 -->
		<view class="fixed-header">
			<!-- 搜索框 -->
			<view class="search-box">
				<input 
					v-model="searchParams.searchText"
					placeholder="搜索课程"
					@confirm="handleSearch"
				/>
				<text class="search-icon">🔍</text>
			</view>

			<!-- 顶部切换栏 -->
			<view class="tab-header">
				<view 
					class="tab-item" 
					:class="{ active: true }"
				>
					全部课程
				</view>
				<view 
					class="tab-item"
					@tap="goToRecommend"
				>
					<AI></AI>推荐课程
				</view>
			</view>
		</view>

		<!-- 课程列表区域 -->
		<scroll-view 
			class="course-list"
			scroll-y
		>
			<view class="course-grid">
				<view 
					v-for="course in courseList"
					:key="course.id"
					class="course-item"
					@tap="goToCourseDetail(course.id)"
				>
					<image 
						class="course-image" 
						:src="course.image || course.image|| '/static/course/default.jpg'" 
						mode="aspectFill" 
					/>
					<view class="course-info">
						<text class="course-title">{{ course.title || course.name }}</text>
						<view class="course-meta">
							<text class="students">{{ course.studentCount || course.totalNum || 0 }}人学习</text>                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                   
						</view>
						<view class="course-bottom">
							<text class="price">{{ course.price > 0 ? `¥${course.price}` : '免费' }}</text>
							<text :class="['tag', getTagType(course)]">{{ getTagText(course) }}</text>
						</view>
					</view>
				</view>
			</view>

			<!-- 加载状态 -->
			<view class="loading" v-if="loading">加载中...</view>
			<view class="no-more" v-if="!hasMore && !loading">没有更多了</view>
		</scroll-view>
	</view>
</template>

<script setup>
import { ref, reactive, onMounted } from 'vue'
import { courseApi } from '../../utils/api'

// 搜索参数
const searchParams = reactive({
	searchText: '',
	current: 1,
	pageSize: 10
})

// 课程列表数据
const courseList = ref([])
const loading = ref(false)
const hasMore = ref(true)
const isRefreshing = ref(false)

// 获取状态栏高度
const statusBarHeight = ref(0)

onMounted(() => {
	// 获取系统信息
	const systemInfo = uni.getSystemInfoSync()
	statusBarHeight.value = systemInfo.statusBarHeight
	
	// 加载课程列表
	loadCourseList()
})

// 加载课程列表
const loadCourseList = async (isRefresh = false) => {
	if (loading.value) return
	loading.value = true
	
	try {
		const res = await courseApi.getCourseList(searchParams)
		console.log('课程数据:', res.data) // 添加日志查看数据结构
		
		if (isRefresh) {
			courseList.value = res.data.records || []
		} else {
			courseList.value = [...courseList.value, ...(res.data.records || [])]
		}
		
		hasMore.value = courseList.value.length < (res.data.total || 0)
		
		if (!isRefresh && hasMore.value) {
			searchParams.current++
		}
	} catch (error) {
		console.error('加载课程列表失败:', error)
		uni.showToast({
			title: '加载失败',
			icon: 'none'
		})
	} finally {
		loading.value = false
		isRefreshing.value = false
	}
}

// 搜索
const handleSearch = () => {
	searchParams.current = 1
	loadCourseList(true)
}

// 下拉刷新
const refresh = () => {
	isRefreshing.value = true
	searchParams.current = 1
	loadCourseList(true)
}

// 加载更多
const loadMore = () => {
	if (!hasMore.value || loading.value) return
	loadCourseList()
}

// 获取标签类型
const getTagType = (course) => {
	if (!course) return 'recommend'
	if (course.price === 0) return 'free'
	if ((course.studentCount || course.totalNum || 0) > 1000) return 'hot'
	return 'recommend'
}

// 获取标签文本
const getTagText = (course) => {
	if (!course) return '推荐'
	if (course.price === 0) return '免费'
	if ((course.studentCount || course.totalNum || 0) > 1000) return '热门'
	return '推荐'
}

// 跳转到课程详情
const goToCourseDetail = (id) => {
	uni.navigateTo({
		url: `/pages/course/detail?id=${id}`
	})
}

// 添加跳转到推荐页面的方法
const goToRecommend = () => {
	uni.navigateTo({
		url: '/pages/course/recommend'
	})
}
</script>

<style scoped>
.course-container {
	display: flex;
	flex-direction: column;
	height: 100vh;
	background-color: #f5f6f7;
}

/* 固定头部区域样式 */
.fixed-header {
	position: relative;
	top: 0rpx;
	left: 0;
	right: 0;
	background: #fff;
	z-index: 100;
	box-shadow: 0 2rpx 8rpx rgba(0, 0, 0, 0.05);
}

.search-box {
	padding: 20rpx 30rpx;
	display: flex;
	align-items: center;
	background-color: #fff;
}

.search-box input {
	flex: 1;
	height: 72rpx;
	background-color: #f5f6f7;
	border-radius: 36rpx;
	padding: 0 30rpx;
	font-size: 28rpx;
	color: #333;
}

.search-icon {
	margin-left: -60rpx;
	font-size: 32rpx;
	color: #999;
}

.tab-header {
	display: flex;
	padding: 0 30rpx 20rpx;
	background: #fff;
}

.tab-item {
	flex: 1;
	text-align: center;
	font-size: 28rpx;
	color: #666;
	position: relative;
	padding: 20rpx 0;
}

.tab-item.active {
	color: #007AFF;
	font-weight: 500;
}

.tab-item.active::after {
	content: '';
	position: absolute;
	bottom: 0;
	left: 50%;
	transform: translateX(-50%);
	width: 40rpx;
	height: 4rpx;
	background: #007AFF;
	border-radius: 2rpx;
}

/* 调整列表区域的位置 */
.course-list {
	flex: 1;
	padding: 20rpx;
	box-sizing: border-box;
	margin-top: 0rpx; /* 固定头部的高度 */
}

.course-grid {
	display: flex;
	flex-wrap: wrap;
	justify-content: space-between;
}

.course-item {
	width: 345rpx;
	margin-bottom: 20rpx;
	background: #fff;
	border-radius: 12rpx;
	overflow: hidden;
	box-shadow: 0 2rpx 8rpx rgba(0, 0, 0, 0.04);
}

.course-image {
	width: 100%;
	height: 194rpx;
	background-color: #f5f6f7;
	object-fit: cover; /* 确保图片填充方式正确 */
}

.course-info {
    padding: 20rpx;
}

.course-title {
	font-size: 28rpx;
	color: #333;
	line-height: 1.4;
	height: 40rpx;
	display: -webkit-box;
	-webkit-box-orient: vertical;
	-webkit-line-clamp: 2;
	overflow: hidden;
	word-break: break-all; /* 防止长标题不换行 */
}

.course-meta {
	margin-top: 10rpx;
	font-size: 24rpx;
	color: #999;
	display: flex;
	align-items: center;
}

.students {
	margin-right: auto; /* 让学习人数靠左 */
}

.teacher {
	color: #666;
}

.course-bottom {
	margin-top: 16rpx;
	display: flex;
	justify-content: space-between;
	align-items: center;
}

.price {
	font-size: 32rpx;
	color: #ff6b6b;
	font-weight: bold;
}

.tag {
	font-size: 22rpx;
	padding: 4rpx 16rpx;
	border-radius: 20rpx;
}

.tag.hot {
	color: #ff6b6b;
	background-color: #fff0f0;
}

.tag.recommend {
	color: #007aff;
	background-color: #f0f7ff;
}

.tag.free {
	color: #52c41a;
	background-color: #f6ffed;
}

.loading, .no-more {
	text-align: center;
	padding: 30rpx;
	color: #999;
	font-size: 24rpx;
}
</style> 